<template>
  <div class="app-main-container" style="padding-top: 10px;">
    <el-tabs v-model="activeTabs" @tab-click="handleClick">
      <el-tab-pane :label="$t('message.cddj')" name="first">
        <template v-if="activeTabs === 'first'">
          <div class="warnning"><i class="el-icon-warning-outline" />{{ $t('message.cddjqfapz') }}</div>
          <el-form label-suffix="：">
            <el-row>
              <el-col :span="6">
                <el-form-item :label="$t('message.djfa')">
                  <el-select
                    v-model="leftIndex"
                    clearable
                    placeholder=""
                    @change="changeXm"
                  >
                    <el-option
                      v-for="item in leftList"
                      :key="item.id"
                      :label="item.planName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('message.cdxm')">
                  <el-select
                    v-model="filters.xza"
                    clearable
                    :placeholder="$t('message.qxz') + $t('message.cdxm')"
                    @change="changeXm"
                  >
                    <el-option
                      v-for="item in optionLista"
                      :key="item.id"
                      :label="item.projectName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('message.xzcq')">
                  <el-select
                    v-model="filters.xzb"
                    :placeholder="$t('message.qxz') + $t('message.cq')"
                    clearable
                    @change="changeCq"
                  >
                    <el-option
                      v-for="(item, index) in optionListb"
                      :key="index.id"
                      :label="item.areaName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item :label="$t('message.xzcd')">
                  <el-select
                    v-model="filters.xzc"
                    :placeholder="$t('message.qxz') + $t('message.cd')"
                    clearable
                    @change="changeCd($event)"
                  >
                    <el-option
                      v-for="(item, index) in optionListc"
                      :key="index"
                      :label="item.siteName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="area-space-box">
            <div class="right">
              <div class="dateUl">
                <span
                  v-for="(item, index) in week"
                  :key="index"
                  :class="weekIndex == index + 1 ? 'on week' : 'week'"
                  @click="weekClick(index + 1)"
                >
                  {{ item }}
                </span>
                <el-select
                  v-if="weekIndex == 9"
                  v-model="filters.date"
                  :placeholder="$t('message.qxz')"
                  @change="getList"
                >
                  <el-option
                    v-for="item in dateList"
                    :key="item.id"
                    :label="item.day"
                    :value="item.id"
                  />
                </el-select>
                <el-button v-if="meta.indexOf('VenuePriceDay') > -1" type="primary" @click="showAddDateBtn">{{ $t('message.xzrq2') }}</el-button>
              </div>
              <div class="doumee-table-buttons">
                <el-button v-if="list.length > 0 && !edit" :loading="createLoading" type="primary" @click="createSiteBtn">{{ $t('message.sccc') }}</el-button>
                <el-button v-if="list.length > 0 && !edit" v-preventReClick @click="refreshPrice">{{ $t('message.gxdj') }}</el-button>
                <el-button v-if="list.length > 0" @click="showEdit">{{ $t('message.plgj') }}</el-button>
                <el-button v-if="meta.indexOf('VenuePriceCopy') > -1" @click="showCopy">{{ $t('message.fzjg') }}</el-button>

                <div class="fix_end">
                  <el-button v-if="list.length > 0 && meta.indexOf('VenuePriceEdit') > -1" v-preventReClick @click="listClick">{{
                    edit ? $t('message.baocun'): $t('message.edit')
                  }}</el-button>
                  <el-button v-if="meta.indexOf('VenuePriceList') > -1" type="primary" @click="$router.push('/venueArea/venuePriceList')">{{ $t('message.cxdjlb') }}</el-button>
                </div>

              </div>
              <el-table
                ref="table"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                :header-row-class-name="'table-header'"
                class="doumee-element-table"
              >
                <el-table-column align="center" :label="$t('message.time')" min-width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.beginTime }} ~ {{ scope.row.endTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="$t('message.mrjg')"
                  prop="defaultPrice"
                  min-width="200"
                >
                  <template slot-scope="scope">
                    <el-input v-if="edit" v-model="scope.row.defaultPrice" oninput="if(value<0)value=0;" />
                    <span v-else>{{ $t('message.rmbfh') }}{{ scope.row.defaultPrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  v-for="(vip, i) in vipType"
                  :key="i"
                  align="center"
                  :label="vip.memberCardName"
                  prop="editTime"
                  min-width="250"
                >
                  <template slot-scope="scope">
                    <div v-if="edit" class="flex-cb">
                      <el-input
                        v-if="scope.row.discounts[i].spriceType != 2"
                        v-model="scope.row.discounts[i].defaultDiscount"
                        :min="0"
                        :max="1"
                        oninput="if(value<0)value=0;if(value>1)value=1;if(value.length>4)value=value.slice(0,4);"
                        @change="scope.row.discounts[i].isModify = 1"
                      />
                      <el-input
                        v-if="scope.row.discounts[i].spriceType == 2"
                        v-model="scope.row.discounts[i].defaultDiscount"
                        maxlength="10"
                        oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
                        @change="scope.row.discounts[i].isModify = 1"
                      />
                      <el-select v-model="scope.row.discounts[i].spriceType" style="width: 80px;margin-left: 10px;flex: none;">
                        <el-option :label="$t('message.zhe')" value="1" />
                        <el-option :label="$t('message.yuan')" value="2" />
                      </el-select>
                    </div>
                    <span v-if="!edit">
                      {{ discountInfo(scope.row.discounts[i]) }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            <!-- <div class="flex-cc doumee-pagination">
          <el-button v-if="list.length > 0 && !edit" type="primary" @click="refreshPrice">{{ $t('message.gxdj') }}</el-button>
          <el-button v-if="list.length > 0 && !edit" type="primary" @click="createSiteBtn">{{ $t('message.sccc') }}</el-button>
          <el-button v-if="list.length > 0 && meta.indexOf('VenuePriceEdit') > -1" type="primary" @click="listClick">{{
            edit ? $t('message.baocun'): $t('message.edit')
          }}</el-button>
          <el-button v-if="meta.indexOf('VenuePriceList') > -1" @click="$router.push('/venueArea/venuePrice/venuePriceList')">{{ $t('message.cxdjlb') }}</el-button>
        </div> -->
            </div>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.djfa')" name="second"><PriceOptions v-if="activeTabs === 'second'" ref="PriceOptionsRef" /></el-tab-pane>
    </el-tabs>

    <el-dialog :title="$t('message.tjrq')" :visible.sync="showAddDate" :width="width" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form :model="addDate">
        <el-form-item :label="$t('message.rq')" label-width="auto">
          <el-date-picker
            v-model="addDate.value"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :placeholder="$t('message.xzrq')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddDate">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="addDateBtn">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('message.fzjg')" :visible.sync="showCopyprice" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form ref="ruleForm" :rules="rules" :model="copyPrice" label-suffix="：">
        <el-form-item :label="$t('message.xzcq')">
          <el-checkbox-group v-model="copyPrice.cqId" @change="getCdList">
            <el-checkbox
              v-for="item in cqList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.areaName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.xzcd')" prop="targetSiteIds">
          <el-checkbox-group v-model="copyPrice.targetSiteIds" @change="getCustomDayListBySiteIds">
            <el-checkbox
              v-for="(item, index) in cdList"
              :key="index"
              :label="item.id"
              :value="item.id"
            >
              {{ item.siteName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.xzzq')" prop="targetTypes">
          <el-checkbox-group v-model="copyPrice.targetTypes">
            <el-checkbox
              v-for="(item, index) in week.slice(0, 8)"
              :key="index"
              :label="index + 1"
              :value="index + 1"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.tsrq')">
          <el-checkbox-group v-model="copyPrice.tergetCustomDayIds">
            <el-checkbox
              v-for="item in dateLists"
              :key="item.id"
              :label="item.id"
              :value="item.id"
            >
              {{ item.day }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCopyprice">{{ $t('message.qx') }}</el-button>
        <el-button type="primary" :loading="subLoading" @click="clickCopyprice">{{ $t('message.copy') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('message.plgj')" :visible.sync="showGj" width="800px" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-form ref="gjForm" :model="gjObj" :rules="rules" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.hyk')" prop="card">
          <el-checkbox-group v-model="gjObj.card" @change="changeCard">
            <el-checkbox v-for="(item, index) in vipTypeb" :key="index" :label="index" :value="index">{{ item.memberCardName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.xzsj')" prop="time">
          <el-checkbox-group v-model="gjObj.time">
            <el-checkbox v-for="(item, index) in list" :key="index" :label="index" :value="index">{{ item.beginTime+ '~' +item.endTime }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.djlx')" prop="select">
          <el-select v-model="gjObj.select" :placeholder="$t('message.qxz') + $t('message.djlx')" :disabled="pdMr">
            <el-option :label="$t('message.gdjg')" value="2" />
            <el-option :label="$t('message.gdjgzk')" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="auto">
          <el-input v-if="gjObj.select == 2" v-model="gjObj.value" oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');" :placeholder="$t('message.qxz') + $t('message.gdjg')" />
          <el-input v-if="gjObj.select == 1" v-model="gjObj.value" oninput="if(value<0)value=0;if(value>1)value=1;if(value.length>4)value=value.slice(0,4);" :placeholder="$t('message.qxz') + $t('message.gdjgzk')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGj = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="addGjBtn('gjForm')">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { sitePriceList, changeCreateSitePrice, getProjectList, getCustomDayListBySiteIds, getAreaListByProjectId, addCustomDay, getCustomDayList, getSitePriceByProject, updateSitePriceByProject, copySitePriceByProject, getSiteModelListByProAndArea, createSite } from '@/api'
// import { time } from 'echarts'
import PriceOptions from '../../priceOptions'
export default {
  name: 'VenuePrice',
  components: {
    PriceOptions
  },
  data() {
    return {
      activeTabs: 'first',
      modalDialog: store.getters.dialog,
      subLoading: false,
      venueId: sessionStorage.getItem('venueId'),
      leftList: [],
      leftIndex: '',
      optionLista: [],
      optionListb: [],
      optionListc: [],
      dateList: [],
      week: [this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'), this.$t('message.z7'), this.$t('message.zjr'), this.$t('message.zdy')],
      weekIndex: 1,
      filters: {},
      list: [],
      showAddDate: false,
      showCopyprice: false,
      copyPrice: {
        cqId: [],
        targetSiteIds: [],
        targetTypes: [],
        tergetCustomDayIds: []
      },
      width: '500px',
      createLoading: false,
      addDate: {},
      edit: false,
      cqList: [],
      cdList: [],
      vipType: [],
      vipTypeb: [],
      projectId: '',
      rules: {
        cqId: [
          { type: 'array', required: true, message: this.$t('message.qxz') + this.$t('message.cq'), trigger: 'change' }
        ],
        targetSiteIds: [
          { type: 'array', required: true, message: this.$t('message.qxz') + this.$t('message.cd'), trigger: 'change' }
        ],
        card: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.hyk'), trigger: 'change' }
        ],
        time: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.time'), trigger: 'change' }
        ],
        select: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.djlx'), trigger: 'change' }
        ],
        value: [
          { required: true, message: this.$t('message.qsr'), trigger: 'blue' }
        ]
      },
      meta: [],
      dateLists: [],
      discountsList: [],
      showGj: false,
      pdMr: false,
      gjObj: {}
    }
  },
  created() {
    this.getsitePriceList()
    this.projectList()
    this.meta = this.$route.meta.buttons || []
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    pdxs(arr, id) {
      if (arr.find(item => item.memberCardId === id)) {
        return true
      } else {
        return false
      }
    },
	discountInfo(item){
		if(item.defaultDiscount && item.spriceType == 2){
			return item.defaultDiscount + this.$t('message.yuan');
		}else if(item.defaultDiscount && item.spriceType != 2){
			return this.discountInfo2(item.defaultDiscount);
		}else{
			return this.discountInfo2(item.cardDiscount);
		}
	},
	discountInfo2(p){
		if(p){
			p = p*1;
			if(p==1){
				return this.$t('message.wu')+this.$t('message.zhekou');
			}else{
				return p*10+this.$t('message.zhe');
			}
		}
		return '';
	},
    handleClick() {
      if (this.activeTabs === 'first') {
        this.getsitePriceList()
      } else {
        this.$refs.PriceOptionsRef.getList(1)
      }
    },
    changeCard(e) {
      this.pdMr = e.includes(0)
      if (e.includes(0)) {
        this.$set(this.gjObj, 'select', '2')
      }
    },
    addGjBtn(formName) {
      const that = this
      const param = this.gjObj
      const list = [...this.list]
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!param.value) {
            if (Number(this.gjObj.select) === 1) {
              return this.$message(this.$t('message.qsr') + this.$t('message.gdjgzk'))
            } else {
              return this.$message(this.$t('message.qsr') + this.$t('message.gdjg'))
            }
          }
          if (Number(this.gjObj.select) === 1) {
            if (param.value > 1) {
              this.gjObj.value = ''
              return this.$message(this.$t('message.zkbndy1'))
            }
          }
          that.edit = true
          const arr = param.time
          const card = param.card
          that.edit = true
          for (var i = 0; i < arr.length; i++) {
            const str = arr[i]
            for (var b = 0; b < card.length; b++) {
              const carfstr = card[b] - 1
              if (carfstr < 0) {
                list[str].defaultPrice = param.value
              } else {
                for (var c = 0; c < list.length; c++) {
                  if (list[str].discounts[carfstr]) {
                    list[str].discounts[carfstr].defaultDiscount = param.value
                    list[str].discounts[carfstr].spriceType = param.select
                  }
                }
              }
            }
          }
          that.showGj = false
          // this.list.forEach(e => {
          //   e.spriceType = param.select
          //   e.discounts[i].defaultDiscount = param.value
          // })
        } else {
          return false
        }
      })
    },
    refreshPrice() {
      changeCreateSitePrice({ param: { siteId: this.filters.xzc }})
        .then(res => {
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.gxdjcg'))
          }
        })
    },
    // 生成场次
    createSiteBtn() {
      this.createLoading = true
      createSite({ param: { siteId: this.filters.xzc }}).then(res => {
        this.createLoading = false
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.sccccg'))
        }
      }).catch(() => {
        this.createLoading = false
      })
    },
    showEdit() {
      if (this.filters.xzc) {
        if (this.weekIndex === 9 && !this.filters.date) {
          return this.$message.warning(this.$t('message.qxz') + this.$t('message.zdyrq'))
        }
        var time = []
        for (var i = 0; i < this.list.length; i++) {
          time.push(i)
        }
        this.gjObj = {
          card: [],
          time
        }
        this.showGj = true
      } else {
        this.$message(this.$t('message.qxz') + this.$t('message.cd'))
      }
    },
    showCopy() {
      if (this.filters.xzc) {
        if (this.weekIndex === 9 && !this.filters.date) {
          this.$message.warning(this.$t('message.qxz') + this.$t('message.zdyrq'))
        } else {
          this.showCopyprice = true
          this.copyPrice = {
            cqId: [],
            targetSiteIds: [],
            targetTypes: [],
            tergetCustomDayIds: []
          }
          this.dateLists = []
          this.areaList()
          this.getCdList()
        }
      } else {
        this.$message(this.$t('message.qxz') + this.$t('message.cd'))
      }
    },
    // 获取复制场区
    areaList() {
      const { venueId } = this
      getAreaListByProjectId({ param: { venueId, id: this.filters.xza }}).then(res => {
        this.cqList = res.recordList
        const cqList = [...res.recordList]
        this.$set(this.copyPrice, 'cqId', cqList.map(function(item) { return item.id }))
      })
    },
    getCustomDayListBySiteIds() {
      if (this.copyPrice.targetSiteIds.length === 0) {
        this.dateLists = []
        return false
      }
      const { venueId } = this
      getCustomDayListBySiteIds({ param: { venueId, siteIds: this.copyPrice.targetSiteIds, planId: this.leftIndex }}).then(res => {
        this.dateLists = res.recordList
      })
    },
    // 获取复制场区场地
    getCdList() {
      this.$set(this.copyPrice, 'targetSiteIds', [])
      const { venueId } = this
      getSiteModelListByProAndArea({ param: { venueId, areaIds: this.copyPrice.cqId, projectId: this.filters.xza }}).then(res => {
        if (res.errorCode === '000000') {
          this.cdList = res.recordList
          const cdList = [...res.recordList]
          this.$set(this.copyPrice, 'targetSiteIds', cdList.map(function(item) { return item.id }))
        }
      })
    },
    clickCopyprice() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const tergetCustomDayIds = this.copyPrice.tergetCustomDayIds.toString(',')
          const targetTypes = this.copyPrice.targetTypes
          if (tergetCustomDayIds) {
            targetTypes.push('9')
          }
          this.subLoading = true
          copySitePriceByProject({
            param: {
              siteId: this.filters.xzc,
              planId: this.leftIndex,
              targetSiteIds: this.copyPrice.targetSiteIds.toString(','),
              targetTypes: targetTypes.toString(','),
              tergetCustomDayIds: tergetCustomDayIds,
              type: this.weekIndex,
              customDayId: this.filters.date
            }
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.fzjgcg'))
              this.cancelCopyprice()
            }
          }, () => {
            this.subLoading = false
          })
        } else {
          return false
        }
      })
    },
    // 获取方案
    getsitePriceList() {
      const { venueId } = this
      sitePriceList({ param: { venueId }}).then(res => {
        this.leftList = res.recordList
        this.leftList.forEach(e => {
          if (e.status === '1') {
            this.leftIndex = e.id
          }
        })
        if (!this.leftIndex) {
          this.leftIndex = res.recordList[0].id
        }
      })
    },
    // 获取项目
    projectList() {
      const { venueId } = this
      getProjectList({ param: { venueId, status: '1', type: '0' }}).then(res => {
        this.optionLista = res.recordList
      })
    },
    changeXm() {
      this.$set(this.filters, 'xzb', '')
      this.$set(this.filters, 'xzc', '')
      this.$set(this.filters, 'date', '')
      this.optionListb = []
      this.optionListc = []
      this.dateList = []
      if (this.filters.xza) {
        this.toGetAreaList()
      }
    },
    changeLeft(id) {
      this.leftIndex = id
      this.$set(this.filters, 'date', '')
      this.dateList = []
      this.weekIndex = 1
      if (this.filters.xzc) {
        this.customDayList()
        this.getTabList()
      }
    },
    listClick() {
      this.edit = !this.edit
      if (!this.edit) {
        const list = this.list
        list.forEach(e => {
          e.discounts.forEach(b => {
            b.discounts = Number(b.discounts)
          })
        })
        updateSitePriceByProject({
          param: { datas: list }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.getTabList()
          }
        }).catch(() => {})
      }
    },
    // 获取场区列表
    toGetAreaList() {
      getAreaListByProjectId({ param: { id: this.filters.xza }}).then(res => {
        for (let i = 0; i < res.recordList.length; i++) {
          if (res.recordList[i].projectNames) {
            res.recordList[i].projectNamesArr = res.recordList[i].projectNames.split('/')
          } else {
            res.recordList[i].projectNamesArr = []
          }
        }
        this.optionListb = res.recordList
      })
    },
    changeCq() {
      this.$set(this.filters, 'xzc', '')
      this.$set(this.filters, 'date', '')
      this.dateList = []
      this.getSpaceList()
    },
    showAddDateBtn() {
      if (!this.filters.xzc) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.cd'))
        return
      }
      this.showAddDate = true
    },
    // 获取某场区场地列表
    getSpaceList() {
      const { filters } = this
      getSiteModelListByProAndArea({ param: { areaIds: [filters.xzb], projectId: this.filters.xza }}).then(res => {
        this.optionListc = res.recordList
        this.projectId = res.recordList[0].id
      })
    },
    changeCd(id) {
      this.optionListc.forEach(e => {
        if (e.id === id) {
          this.projectId = e.projectId
        }
      })
      this.$set(this.filters, 'date', '')
      this.dateList = []
      this.customDayList()
      if (this.filters.xzc && this.weekIndex !== 9) {
        this.getTabList()
      }
    },
    // 获取时间列表
    customDayList() {
      const { filters } = this
      getCustomDayList({ param: { siteId: filters.xzc, planId: this.leftIndex }}).then(res => {
        this.dateList = res.recordList
      })
    },
    addDateBtn() {
      if (!this.addDate.value) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.rq'))
        return
      }
      this.subLoading = true
      addCustomDay({
        param: { siteId: this.filters.xzc, planId: this.leftIndex, day: this.addDate.value }
      }).then(res => {
        this.subLoading = false
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.xzrqcg'))
          this.showAddDate = false
          this.addDate = {}
          this.customDayList()
        }
      }).catch(err => {
        this.subLoading = false
        console.log(err)
      })
    },
    cancelAddDate() {
      this.showAddDate = false
      this.addDate = {}
    },
    cancelCopyprice() {
      this.showCopyprice = false
      this.cdList = []
      this.copyPrice = {
        cqId: [],
        targetSiteIds: [],
        targetTypes: [],
        tergetCustomDayIds: []
      }
    },
    weekClick(index) {
      this.weekIndex = index
      if (this.filters.xzc && index === 9) {
        this.customDayList()
      }
      if (this.filters.xzc && index !== 9) {
        this.$set(this.filters, 'date', '')
        this.getTabList()
      }
    },
    getList() {
      if (this.filters.date) {
        this.getTabList()
      }
    },
    getTabList() {
      getSitePriceByProject({
        param: { customDayId: this.filters.date, planId: this.leftIndex, type: this.weekIndex, siteId: this.filters.xzc }
      }).then(res => {
        if (res.recordList) {
          this.list = res.recordList
          this.vipType = res.recordList[0].discounts
          this.vipTypeb = [{ memberCardName: this.$t('message.mrjg') }, ...res.recordList[0].discounts]
        } else {
          this.list = []
          this.vipType = []
        }
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.warnning{
  height: 36px;
  display: flex;
  align-items: center;
  background: #fbedea;
  border-radius: 2px;
  color: #EE3821;
  padding-left: 20px;
  margin-bottom: 20px;
  i{
    margin-right: 6px;
  }
}

.area-space-box {
  display: flex;
  position: relative;
  .left {
    width: 230px;
    padding-right: 30px;
    box-sizing: border-box;
    div {
      background-color: $mainContainerBg;
      color: $menuActive;
      font-size: 16px;
      line-height: 54px;
      padding: 0 30px;
      cursor: pointer;
      margin-bottom: 20px;
      border-radius: 8px;
      &.on {
        background-color: $menuActive;
        color: #ffff;
      }
    }
  }
  .right {
    flex: 1;
    min-width: 0;
    .dateUl {
      .week {
        background-color: $mainContainerBg;
        text-align: center;
        font-size: 14px;
        padding: 0 30px;
        line-height: 40px;
        margin-bottom: 30px;
        cursor: pointer;
        margin-right: 12px;
        display: inline-block;
        border-radius: 2px;
        &.on {
          background-color: $menuActive;
          color: #ffff;
        }
      }
      .el-button {
        margin-left: 12px;
        margin-bottom: 30px;
      }
    }
    .doumee-table-buttons{
      display: flex;
      .fix_end{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
